<template>
	<view class="flex-sb m-t20">
		<view class="card flex-c" :class="[{'card-el': tabIndex === 0}]" @click="chaneTab(0)">
			<text class="text-400-328">不限</text>
		</view>
		<view class="card flex-c" :class="[{'card-el': tabIndex === 1}]" @click="chaneTab(1)">
			<text class="text-400-328">最新</text>
		</view>
		<view class="card flex-c" :class="[{'card-el': tabIndex === 2}]" @click="chaneTab(2)">
			<text class="text-400-328">推荐</text>
		</view>
		<view class="card flex-c" :class="[{'card-el': tabIndex === 3}]" @click="chaneTab(3)">
			<text class="text-400-328">筛选</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineEmits, ref } from 'vue'
	
	const emit = defineEmits<{
		(e: 'change'): void;
	}>()
	
	const tabIndex = ref(0)
	
	const chaneTab = (index: number) => {
		if (index === tabIndex.value) return
		tabIndex.value = index
		emit('change')
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 156rpx;
		height: 56rpx;
		border-radius: 6rpx;
		background-color: #F2F3F5;
		border: 1rpx solid #EEEEEE;
	}

	.card-el {
		background: #1269FF;
		border: 1rpx solid #EEEEEE;

		text {
			color: $text-color-2 !important;
		}
	}
</style>